<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>JS 自定义菜单</title>
    <style>
        #list{
            border:1px solid;
            list-style:none;
            width:110px;
            height:220px;
            padding:0px 20px;
            box-shadow:3px 3px 3px #747474;
            position:absolute;
            top:200px;
            left:200px;
            display:none;

        }
        #list li{
            margin-top:15px;
            padding-left:10px;
        }
    </style>
</head>
<body>
    <h1>JS 自定义菜单</h1>
    <hr>
   <ul id="list">
       <li>常用网址</li>
       <li>学习网址</li>
       <li>新闻网址</li>
       <li>个人网址</li>
       <li>刷新网址</li>
       <li>资源网址</li>
   </ul> 

   <script>
       // 找对象 换属性
       var list = document.getElementById('list');
       // 因为是在页面右击 所以 设计页面的右击事件
       document.oncontextmenu = function(en){
            var en = en || window.event; // 为了得到该右击事件的默认属性
            console.log(en);
            list.style.display = "block";
            list.style.left = en.clientX + 'px';
            list.style.top = en.clientY + 'px';
            return false
       }

       document.onclick = function(){
            list.style.display = 'none';
       }

       // 移动鼠标 显示 效果
       var lis = list.getElementsByTagName('li');
       for(var i = 0; i< lis.length; i++){
            lis[i].onmouseover = function(){
                this.style.backgroundColor = "#747474";
                this.style.color = "white";
             }
            lis[i].onmouseout = function(){
                this.style.backgroundColor = "white";
                this.style.color = "black";

            } 
        }
   </script>
    

</body>
</html>